document.addEventListener('DOMContentLoaded', () => {
    const productImageContainer = document.querySelector('.product-image-container');
    const productImage = document.querySelector('.product-image');
    const zoomLens = document.querySelector('.zoom-lens');
    const zoomedImageContainer = document.querySelector('.zoomed-image-container');
    const zoomedImage = document.querySelector('.zoomed-image');

    productImageContainer.addEventListener('mousemove', (e) => {
        const { left, top, width, height } = productImageContainer.getBoundingClientRect();
        const x = e.pageX - left - window.pageXOffset;
        const y = e.pageY - top - window.pageYOffset;

        const lensWidth = zoomLens.offsetWidth / 2;
        const lensHeight = zoomLens.offsetHeight / 2;

        let lensX = x - lensWidth;
        let lensY = y - lensHeight;

        if (lensX < 0) lensX = 0;
        if (lensY < 0) lensY = 0;
        if (lensX > width - lensWidth * 2) lensX = width - lensWidth * 2;
        if (lensY > height - lensHeight * 2) lensY = height - lensHeight * 2;

        zoomLens.style.left = `${lensX}px`;
        zoomLens.style.top = `${lensY}px`;

        const zoomFactor = 2;
        zoomedImage.style.left = `${-lensX * zoomFactor}px`;
        zoomedImage.style.top = `${-lensY * zoomFactor}px`;
    });

    productImageContainer.addEventListener('mouseenter', () => {
        zoomLens.style.display = 'block';
        zoomedImageContainer.style.display = 'block';
    });

    productImageContainer.addEventListener('mouseleave', () => {
        zoomLens.style.display = 'none';
        zoomedImageContainer.style.display = 'none';
    });

    const minusButton = document.querySelector('.minus');
    const plusButton = document.querySelector('.plus');
    const quantityInput = document.querySelector('input[type="number"]');
    
    minusButton.addEventListener('click', () => {
        if (quantityInput.value > 1) {
            quantityInput.value--;
        }
    });

    plusButton.addEventListener('click', () => {
        quantityInput.value++;
    });

    const buyNowButton = document.querySelector('.buy-now');
    buyNowButton.addEventListener('click', () => {
        alert('购买成功!');
    });
});

